<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-18 18:54:46
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-21 10:56:48
 * @FilePath: \dcollege\src\views\home\home.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="home">
    <!-- 搜索按钮 -->
    <div class="search">
      <button class="searchBtn">
        <var-icon class="searchIcon" name="magnify" @click="handleSearch()" /><span class="searchText">搜索</span>
      </button>
    </div>
    <!-- 日期功能 -->
    <div class="date">
      <div class="dateHeader">
        <span class="dateNum">{{ dataTime }}</span>
        <span class="weekNum">{{ day }}</span>
      </div>
      <div class="welcome">开始今日的学习之旅吧</div>
    </div>
    <!-- 考试功能 -->
    <div class="exam">
      <h1 class="examTitle">
        我的日程
      </h1>
      <!-- 考试信息 -->
      <div class="examContent">
        <!-- 考试项 -->
        <div class="examMain" v-if="scheduleList" v-for="item in scheduleList.records">
          <!-- 左边图标 -->
          <var-image src="./image/exam.png" alt="" class="img" />
          <!-- 右边考试内容 -->
          <div class="content">
            <!-- 考试名称 -->
            <div class="examName">
              <span>{{ item.name }}</span>
            </div>
            <!-- 考试倒计时 -->
            <div class="examTime">
              <span class="timeContent">上课时间：</span>
              <span class="timeNum">{{ item.scheduleTime }}</span>
            </div>

          </div>
        </div>
      </div>


    </div>
    
    <!-- 我的课程功能 -->
    <div class="lesson">
      <div class="lessonTitle">
        <div class="left">我的课程</div>
        <div class="right" @click="checkLessons()">全部课程<var-icon name="chevron-right" /></div>
      </div>
      <div class="lessons">
        <div class="lessonCard" v-for="lesson in lessonList">
          <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
          <div class="lessonName">{{ lesson.name }}</div>
        </div>
       
       
      </div>
    </div>
    <!-- 工作台 -->
    <div class="workbench">
      <div class="workbenchTitle">
        工作台
      </div>
      <div class="workbenchContent">
        <div class="workbenchCard" v-for="item in workbenchList" @click="router.push(item.to)">
          <img :src="imgRequire(item.img)" alt="">
          <div class="workbenchName">{{ item.title }}</div>
        </div>

      </div>
    </div>
    <!-- 分割线 -->
    <var-divider class="divider" description="我是有底线的" />
  </div>

</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserScheduleStore } from '@/stores/schedule'
import { useExamStore } from '@/stores/exam'
import { useLessonStore } from '@/stores/lesson'
import { storeToRefs } from 'pinia';

import { ref ,onMounted} from "vue";
const router = useRouter();
const userScheduleStore = useUserScheduleStore()
const examStore = useExamStore()
const lessonStore = useLessonStore()
// 解构方法和属性
const { userSchedule } = userScheduleStore
const { scheduleList } = storeToRefs(userScheduleStore)

const { ExamList } = examStore
const { examList } = storeToRefs(examStore)

const {LessonList} = lessonStore
const { lessonList } = storeToRefs(lessonStore)


//定义显示图片的方法
const imgRequire = (img: string) => {
  try {
    const handlePath = img.replace('.', '.');
    return new URL(handlePath, import.meta.url).href;
  } catch (error) {
    console.warn(error);
  }
};
//  工作台图标
interface workbenchItem {
  img: string;
  title: string;
  to: string;
}
const workbenchList = ref<workbenchItem[]>([
  { img: './image/workbench1.png', title: '课程', to: '/lesson' },
  { img: './image/workbench2.png', title: '考试', to: '/publishQuestion' },
  { img: './image/workbench3.png', title: '日程', to: '/schedule' },
  { img: './image/workbench4.png', title: '作业', to: '/home' },
  { img: './image/workbench5.png', title: '论文', to: '/home' },
  { img: './image/workbench6.png', title: '题库', to: '/home' },
])

// 获取当前日期
//现在的时间
let dataTime = ref("");
//今天星期
const day = ref("");


//获取当前的时间
const getNowTime = () => {
  //时间戳
  const Dates = new Date();

  //星期
  const data: number = Dates.getDay();
  //月份下标是0-11
  const Months = Dates.getMonth() + 1 < 10 ? "0" + (Dates.getMonth() + 1) : Dates.getMonth() + 1;
  //具体的天数
  const Day = Dates.getDate() < 10 ? "0" + Dates.getDate() : Dates.getDate();

  dataTime.value = `${Months}月${Day}日`;
  day.value = `${data}`;

  //数字转化为汉字（优化写法）
  let arr1 = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]

  let arr = ["1", "2", "3", "4", "5", "6", "0"]
  for (let i in arr) {
    if (arr[i] == day.value) {
      day.value = arr1[i]
    }
  }
  return dataTime.value;

}
getNowTime();




//获取日程
onMounted(async ()=>{
 await LessonList()
 await userSchedule()

})

// 初始化数据

console.log('scheduleList',scheduleList);




// 点击搜索按钮的方法
function handleSearch() {
  console.log("搜索方法被点击了");
}
// 点击查看全部课程的方法
function checkLessons() {
  router.push("/lesson");
}
</script>

<style lang="less" scoped>
.home {
  background-image: url("./image/homeBack.png");
  background-repeat: no-repeat;
  background-size: 400px 180px;
}

.search {
  margin-top: 40px;
  display: inline-block;

  .searchBtn {
    position: absolute;
    right: 10px;
    width: 80px;
    background-color: rgb(244, 246, 250);
    border: none;
    border-radius: 16px;
    padding: 4px;
    font-size: 14px;

    .searchIcon {
      --icon-size: 17px;
      color: #c6c3c3;
    }

    .searchText {
      margin-right: 2px;
      margin-bottom: 10px;
      color: #c6c3c3;
      font-family: "PingFang";
    }
  }
}

.date {
  .dateHeader {
    display: flex;
    margin-top: 35px;
    margin-left: 25px;

    // font-family: 'PingFang';
    .dateNum {
      font-size: 27px;
      font-weight: 700;
    }

    .weekNum {
      font-weight: 700;
      font-size: 15px;
      margin-top: 15px;
      margin-left: 13px;
    }
  }

  .welcome {
    font-size: 15px;
    font-weight: 600;
    margin-left: 28px;
    margin-top: 10px;
  }
}

.exam {
  margin-top: 35px;
  margin-left: 10px;

  .examTitle {
    padding: 0px 5px;
    font-size: 17px;
    font-weight: 800;
  }

  .examContent {
    display: flex;
    // flex-shrink:0;
    overflow: auto;
    margin-top: -10px;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .examMain {
    width: 220px;
    height: 62px;
    border-radius: 10px;
    // box-shadow: 0px 0px 3px 1px rgba(128, 126, 126, 0.5);
    background-color: #fff;
    display: flex;
    margin-top: 10px;
    flex: 1 0 auto;
    margin-right: 10px;

    .img {
      width: 25px;
      height: 25px;
      margin: 15px;
    }

    .content {
      margin-top: 10px;
      margin-left: -3px;

      .examName {
        font-weight: bolder;
        color: black;
        font-size: 15px;
      }

      .examTime {
        margin-top: 5px;

        .timeContent {
          font-size: 13px;
        }

        .timeNum {
          font-size: 16px;
          color: rgb(255, 134, 99);
          font-weight: bold;
        }
      }
    }
  }
}

.schedule {
  margin-left: 15px;
  margin-top: 10px;

  .scheduleTitle {
    font-size: 17px;
    font-weight: 800;
  }

  .card {
    display: flex;
    margin-left: -5px;
    overflow: auto;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .scheduleCard {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    // box-shadow: 0px 0px 1px 0px rgba(128, 126, 126, 0.5);
    width: 64px;
    height: 64px;
    margin-right: 13px;

    .day {
      font-size: 13px;
      margin-top: -5px;
      color: #c6c3c3;
    }

    .dayNum {
      font-weight: 900;
      font-size: 17px;
      color: rgb(62, 61, 61);
    }

    .dayClassNum {
      background-color: rgb(235, 238, 345);
      font-size: 10px;
      padding: 3px;
      width: 45px;
      line-height: 12px;
      color: #9a9999;
      border-radius: 10px;
      text-align: center;
    }
  }

  .scheduleCard:hover {
    background-color: rgb(38, 89, 247);

    .dayNum {
      color: #fff;
    }

    .dayClassNum {
      background-color: rgb(79, 120, 248);
      color: #fff;
    }
  }
}

.lesson {
  margin-left: 15px;
  margin-top: 10px;

  ::-webkit-scrollbar {
    display: none;
  }

  .lessonTitle {
    display: flex;
    justify-content: space-between;

    .left {
      font-size: 17px;
      font-weight: 800;
    }

    .right {
      margin-top: 6px;
      margin-right: 10px;
      font-size: 14px;
      color: #868484;
    }
  }

  .lessons {
    margin-top: 10px;
    height: 110px;
    width: 360px;
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    overflow: auto;


    .lessonCard {
      padding: 10px;
      width: 80px;
      margin-right: -15px;

      .cardImg {
        width: 50px;
        height: 50px;
        border-radius: 10px;
      }

      .lessonName {
        font-size: 12px;
        font-weight: 900;
      }
    }
  }
}

.workbench {
  margin-left: 15px;
  margin-top: 10px;

  .workbenchTitle {
    font-size: 17px;
    font-weight: 800;
  }

  .workbenchContent {
    margin-top: 10px;
    width: 360px;
    height: 180px;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    // justify-content: space-between;
    flex-wrap: wrap;

    .workbenchCard {
      padding: 9px 15px;
      width: 60px;
      height: 65px;
      margin-top: 8px;

      img {
        margin-left: 13px;
        width: 35px;
      }

      .workbenchName {
        text-align: center;
        font-size: 13px;
      }
    }
  }
}

.divider {
  padding-top: 10px;
}
</style>
